<template>
  <div id="sub-app-b"></div>
  <router-link to="/">Go MainApp Home</router-link>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

let subAppInstance = null;

const mountSubAppB = async () => {
  try {
    if (subAppInstance) {
      subAppInstance.unmount();
    }
    const SubAppBModule = await import('../../../sub-app-b/src/main');
    subAppInstance = SubAppBModule.mount('#sub-app-b');
  } catch (error) {
    console.error('Failed to load SubAppB:', error);
  }
};

onMounted(()=>{
  mountSubAppB()
});

onUnmounted(() => {
  if (subAppInstance) {
    subAppInstance.unmount();
  }
});
</script>



